<script setup lang="ts">
import { computed } from 'vue'
import type { BaseWindow } from './class/basewindow'

const props = defineProps<{
  visible: boolean
  data: BaseWindow | undefined
}>()

const style = computed(() => {
  if (props.data) {
    const bottom =
      (props.data.rect?.height as number) - (props.data.bottom as number)
    const right =
      (props.data.rect?.width as number) - (props.data.right as number)
    return {
      top: props.data.top + 'px',
      bottom: bottom + 'px',
      left: props.data.left + 'px',
      right: right + 'px',
    }
  } else {
    return {}
  }
})
</script>

<template>
  <div v-show="visible" class="mask-window" :style="style"></div>
</template>

<style scoped lang="less">
.mask-window {
  position: absolute;
  box-sizing: border-box;
  border-radius: var(--window-border-radius);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1px);
}
</style>
